<template>
	<view class="wrapper">

		<view class="topTitle">
			选择订单类型开具发票
		</view>

		<view class="card">
			<view class="order">
				<view class="order-item" @click="goBusiness(1)">
					<image src="../static/mine-order1.png"></image>
					<text>短租</text>
				</view>

				<view v-if="false" class="order-item" @click="goBusiness(2)">
					<image src="../static/mine-order2.png"></image>
					<text>长租</text>
				</view>


				<view  v-if="false" class="order-item" @click="goBusiness(3)">
					<image src="../static/mine-order4.png"></image>
					<text>豪车</text>
				</view>
			</view>
		</view>

		<view class="invoiceOtherWrapper">
			<view class="item" @click="goOtherInvoice(1)">
				<image src="../static/invoice_title.png"></image>
				<text>发票抬头</text>
			</view>
			<view class="item" @click="goOtherInvoice(2)">
				<image src="../static/invoice_history.png"></image>
				<text>开票历史</text>
			</view>
			<view class="item" @click="goOtherInvoice(3)">
				<image src="../static/invoice_help.png"></image>
				<text>开票帮助</text>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			goBusiness(type) {
				uni.navigateTo({
					url: './invoice-order?type=' + type
				})
			},
			goOtherInvoice(type) {
				switch (type) {
					case 1: //发票抬头
						uni.navigateTo({
							url: './invoice-header'
						})
						break
					case 2: //开票历史
						uni.navigateTo({
							url: './invoice-history'
						})
						break
					case 3: //开票帮助
						uni.navigateTo({
							url: '../../pages/guide/guide?type=8'
						})
						break

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 0 36upx;
	}

	.topTitle {
		margin: 50upx 0 20upx;
		color: $text-color-33;
		font-size: 28upx;
		font-weight: bold;

		&::before {
			content: '';
			display: inline-block;
			width: 8upx;
			height: 26upx;
			border-radius: 2upx;
			background-color: $main-color;
			position: relative;
			top: 2upx;
			margin-right: 10upx;

		}
	}

	.order {
		padding: 20upx 0;
		@include flex;
		justify-content: space-around;

		.order-item {
			@include flex(column);
			justify-content: center;
			align-items: center;

			image {
				width: 72upx;
				height: 72upx;
			}

			text {
				font-size: 24upx;
				margin-top: 10upx;
			}
		}
	}

	.invoiceOtherWrapper {
		margin-top: 10upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item {
			background-color: $bg-white-color;
			border-radius: 16upx;
			width: 210upx;
			height: 160upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 42upx;
				height: 42upx;
			}

			text {
				color: $text-color-33;
				font-size: 28upx;
				font-weight: bold;
				margin-top: 20upx;
			}
		}
	}
</style>
